<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="类目名称" prop="title" :label-width="formLabelWidth">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="类别" prop="ownSpec" :label-width="formLabelWidth">
      <el-input v-model="form.ownSpec"></el-input>
    </el-form-item>
    <el-form-item label="规格" prop="indexs" :label-width="formLabelWidth">
      <el-input v-model="form.indexs"></el-input>
    </el-form-item>
    <!-- <el-form-item label="原价" prop="originalPrice" :label-width="formLabelWidth">
      <el-input v-model.number="form.originalPrice"></el-input>
    </el-form-item>-->
    <el-form-item label="销售价格" prop="price2" :label-width="formLabelWidth">
      <el-input v-model="form.price2"></el-input>
    </el-form-item>
    <el-form-item label="库存" prop="stock" :label-width="formLabelWidth">
      <el-input v-model.number="form.stock"></el-input>
    </el-form-item>
    <!-- <el-form-item label="钻石数量" prop="useDiamond" :label-width="formLabelWidth">
      <el-input v-model="form.useDiamond"></el-input>
    </el-form-item>-->
    <el-form-item label="上传图片" prop="image" :label-width="formLabelWidth">
      <el-upload
        class="avatar-uploader"
        action
        :http-request="uploadFile"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="form.image" :src="form.image" class="avatar" />
        <i v-else style="line-height: 100px;" class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
    <el-form-item :label-width="formLabelWidth">
      <el-button plain @click="resetForm('formRef')">取消</el-button>
      <el-button type="primary" @click="submitForm('formRef')">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      var reg = /^\d+(?=\.{0,1}\d+$|$)/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("销售价格必须为正数"));
      }
    };
    var validatePass2 = (rule, value, callback) => {
      var reg = /^([0]|[1-9][0-9]*)$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("库存必须为正整数"));
      }
    };
    return {
      editIndex: null, //编辑的索引
      form: {
        title: "", //商品标题
        indexs: "", //
        ownSpec: "", //
        // originalPrice : '',//原价
        price2: "", // 销售价格
        price: "",
        stock: "", //
        stockId: "",
        //useDiamond: "", //
        image: "", //图片
        postage: {
          provinceId: "",
          postageMoney: ""
        }
      },
      formLabelWidth: "120px",
      rules: {
        title: [{ required: true, message: "请输入商品标题", trigger: "blur" }],
        indexs: [
          { required: true, message: "请输入商品类别", trigger: "blur" }
        ],
        ownSpec: [
          { required: true, message: "请输入商品规格", trigger: "blur" }
        ],
        // originalPrice : [{ required: true, message: "请输入商品原价", trigger: "blur" }],
        price2: [
          { required: true, message: "请输入商品销售价格", trigger: "blur" },
          { validator: validatePass, trigger: "blur" }
        ],
        stock: [
          { required: true, message: "请输入商品库存", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" }
        ],
        // useDiamond: [
        //   { required: true, message: "请输入钻石数量", trigger: "blur" }
        // ],
        image: [{ required: true, message: "请上传商品图片", trigger: "blur" }]
      }
    };
  },
  methods: {
    initData(form, index) {
      this.form = form;
      console.log(111, this.form);
      this.editIndex = index;
    },
    uploadFile(file) {
      this.$service.uploadFileFunction(file, result => {
        this.form.image = result.url;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.form.price = this.form.price2 * 100;
          this.$emit("categorySubmit", this.form, this.editIndex);
          this.editIndex = null;
          this.$refs[formName].resetFields();
        }
      });
    },
    resetForm(formName) {
      this.$emit("categorySubmit", null);
      this.$refs[formName].resetFields();
    },
    handleAvatarSuccess() {},
    beforeAvatarUpload() {}
  }
};
</script>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>